<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-09-23 20:07:29
-->
<template>
  <!-- 2.设置图表容器 容纳图表 -->
  <!-- 如何在vue中设置dom节点 -->
  <div ref="root" style="height: 150px"></div>
</template>
<script>
//从g2plot对象中引入折现图构造函数
import { Pie } from "@antv/g2plot";
export default {
  //1.引入组件库
  data() {
    return {};
  },
  //created dom节点创建完毕 但是没有挂载
  //一般用于调用方法 加载完文档拿数据
  created() {
    //this.load()
  },
  //在onMounted之后执行 页面dom节点创建完毕 挂载完毕 挂载完毕才能获取dom节点
  mounted() {
    this.initCharts();
  },
  methods: {
    //封装图表方法
    initCharts() {
      //3.创建一个图表方法 ref="root"
      let pie = new Pie(this.$refs["root"], {
        data: [
          { type: "电话", value: 27 },
          { type: "线上", value: 25 },
          { type: "线下", value: 18 },
          { type: "短信", value: 15 },
          { type: "邮件", value: 10 },
          { type: "其他", value: 5 },
        ],
        tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        xAxis: {
          label: {
            rotate: -45,
            offset: 25,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
        appendPadding: 10,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        label: {
          type: "outer",
          content: "{name} {percentage}",
        },
        interactions: [
          { type: "pie-legend-active" },
          { type: "element-active" },
        ],
      });
      //4.渲染
      pie.render();
    },
  },
};
</script>